<template>
  <section class="login-container">
    <el-form class="login-form" ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
      <div class="title-container">
        <h3 class="title">用户登录</h3>
      </div>
      <el-form-item prop="account">
        <el-input
          v-model="loginForm.account"
          placeholder="请输入用户名"
          name="account"
          type="text"
          clearable>
          <template #prefix>
            <el-icon class="el-input__icon"><def-icon icon="user" /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          placeholder="请输入密码"
          name="password"
          type="password"
          @keyup.enter="submitForm"
          clearable>
          <template #prefix>
            <el-icon class="el-input__icon"><def-icon icon="lock" /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-checkbox
        v-model="loginForm.isRemember"
        label="记住我"
        @keyup.enter="submitForm"></el-checkbox>
      <div class="form-btn">
        <el-button type="primary" size="large" @click="submitForm">登录</el-button>
        <el-button size="large" @click="resetForm">重置</el-button>
      </div>
      <h1 style="margin: 20px 0">{{ loginForm }}</h1>
    </el-form>
  </section>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus/es'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
// 定义数据
const loginForm = reactive({
  account: '',
  password: '',
  isRemember: false
})
// 获取登录表单实例
const loginFormRef = ref<FormInstance>()
// 登录表单验证规则
const loginFormRules = reactive<FormRules>({
  account: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 3, message: '用户名长度必须大于3', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 3, message: '密码长度必须大于3', trigger: 'blur' }
  ]
})

// 提交登录
const submitForm = () => {
  if (!loginFormRef.value) return
  loginFormRef.value.validate(async (valid) => {
    if (valid) {
      // 登录
      await userStore.loginAction(loginForm)
      // 获取当前用户菜单（权限）
      // await layoutStore.setCurrentUserMenuAction()
    }
  })
}
// 重置表单
const resetForm = () => {
  loginFormRef.value?.resetFields()
}
</script>

<style scoped lang="scss">
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
$cursor: #fff;

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;
  position: relative;

  .login-form {
    @include posCenterXY;
    top: 40%;
    width: 520px;
    max-width: 100%;
    //padding: 160px 35px 0;
    //margin: 0 auto;
    overflow: hidden;
    .title-container {
      position: relative;

      .title {
        font-size: 26px;
        color: $light_gray;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }
    }
    ::v-deep(.el-form-item) {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
      margin-bottom: 20px;
      .el-input {
        display: inline-block;
        height: 47px;
        .el-input__wrapper {
          width: 100%;
          background: transparent;
          border: none;
          padding: 0 20px;
          .el-input__inner {
            -webkit-appearance: none;
            color: $light_gray;
            height: 47px;
            caret-color: $cursor;
          }
        }
      }
    }
    .el-checkbox {
      color: $light_gray;
      padding-left: 10px;
      margin-bottom: 20px;
    }
    .form-btn {
      @include flexRowSa;
      .el-button {
        flex: 1;
        &:first-of-type {
          margin-right: 15%;
        }
      }
    }
  }
}
</style>
